<template>
  <div>
    <div class="left">
      <div class="title">
        <span class="word">项目管理</span>
      </div>
      <div class="line"></div>
      <div class="middle">
        <div class="bottom">
          <div class="Btop">
            <div></div>
            <el-button @click="add = true">添加</el-button>
          </div>
          <div class="table">
            <el-table :data="xinxi.tableData">
              <el-table-column
                prop="projectName"
                label="项目名称"
                align="center"
              />
              <el-table-column prop="city" label="城市" align="center" />
              <el-table-column prop="functions" label="功能" align="center" />
              <el-table-column
                prop="onlineTime"
                label="上线时间"
                align="center"
                value-format="YYYY/MM/DD hh:mm:ss"
              />

              <el-table-column label="操作" align="center">
                <template #default="scope">
                  <el-button
                    size="small"
                    class="smbtn"
                    @click="handleupdate(scope.$index, scope.row)"
                    >修改</el-button
                  >
                  <el-button
                    size="small"
                    class="smbtn"
                    type="danger"
                    @click="handleDelete(scope.row)"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>

            <div class="page">
              <el-pagination
                v-model:currentPage="obj.page"
                layout="prev, pager, next"
                @current-change="handleCurrentChange"
                :total="obj.total"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 新增弹出框 -->
  <div class="dialogs userDialog">
    <el-dialog v-model="add" title="新建项目">
      <div class="line4"></div>

      <el-form :model="addform">
        <el-form-item label="项目名称" :label-width="formLabelWidth1">
          <el-input
            v-model="xinxi.addproject.projectName"
            autocomplete="off"
            placeholder="请输入项目名称"
          />
        </el-form-item>

        <el-form-item label="城市/省份" :label-width="formLabelWidth1">
          <el-cascader size="large" :options="xinxi.options" @change="qweqwe">
          </el-cascader>
        </el-form-item>
        <el-form-item label="功能" :label-width="formLabelWidth1">
          <el-select
            v-model="xinxi.addproject.functions"
            class="m-2"
            placeholder="请选择项目的功能"
            size="small"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="业主名称" :label-width="formLabelWidth1">
          <el-input
            v-model="xinxi.addproject.owner"
            autocomplete="off"
            placeholder="请输入业主名称"
          />
        </el-form-item>
        <el-form-item label="总点数" :label-width="formLabelWidth1">
          <el-input
            v-model="xinxi.addproject.point"
            autocomplete="off"
            placeholder="请输入总点数"
          />
        </el-form-item>
        <el-form-item label="图片" :label-width="formLabelWidth1">
          <el-upload
            v-model:file-list="fileList"
            :auto-upload="true"
            action="http://139.224.69.209:9677/OaDeviceController/uploads"
            class="upload-demo"
            :on-success="imgupload"
            :limit="2"
            :on-remove="handleRemove"
            :on-change="cg"
            :show-file-list="true"
          >
            <div class="iconfont icon-yunshangchuan_o">上传</div>
          </el-upload>
        </el-form-item>
        <el-form-item label="上线时间" :label-width="formLabelWidth1">
          <el-date-picker
            v-model="xinxi.addproject.onlineTime"
            type="datetime"
            placeholder="年/月/日-:-"
            value-format="YYYY/MM/DD hh:mm:ss"
          />
        </el-form-item>
      </el-form>
      <div class="line"></div>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="(add = false), (cpwd = false)" class="cancel"
            >取消</el-button
          >
          <el-button
            type="primary"
            @click="addproject(), (cpwd = false)"
            class="save"
            >保存</el-button
          >
        </span>
      </template>
    </el-dialog>
  </div>

  <!-- 修改项目弹出框 -->
  <div class="dialogs userDialog">
    <el-dialog title="修改项目" v-model="edit">
      <div class="line4"></div>
      <el-form :model="xinxi">
        <el-form-item label="项目名称" :label-width="formLabelWidth1">
          <el-input
            v-model="xinxi.editproject.projectName"
            autocomplete="off"
            placeholder="请输入项目名称"
          />
        </el-form-item>
        <el-form-item label="城市/省份" :label-width="formLabelWidth1">
          <el-cascader
            size="large"
            :options="xinxi.options"
            @change="putcity"
            v-model="xinxi.editproject.city"
            clearable
          >
          </el-cascader>
        </el-form-item>
        <el-form-item label="功能" :label-width="formLabelWidth1">
          <el-select
            v-model="xinxi.editproject.functions"
            class="m-2"
            placeholder="请选择项目的功能"
            size="small"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="业主名称" :label-width="formLabelWidth1">
          <el-input
            v-model="xinxi.editproject.owner"
            autocomplete="off"
            placeholder="请输入业主名称"
          />
        </el-form-item>
        <el-form-item label="总点数" :label-width="formLabelWidth1">
          <el-input
            v-model="xinxi.editproject.point"
            autocomplete="off"
            placeholder="请输入总点数"
          />
        </el-form-item>
        <el-form-item label="上线时间" :label-width="formLabelWidth1">
          <el-date-picker
            v-model="xinxi.editproject.onlineTime"
            type="datetime"
          />
        </el-form-item>
      </el-form>
      <div class="line"></div>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancelSave" class="cancel">取消</el-button>
          <el-button
            type="primary"
            @click="editproject(), (cpwd = false)"
            class="save"
            >保存</el-button
          >
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { regionData, CodeToText, TextToCode } from "element-china-area-data";
import {
  ProjectUpdate,
  addProject,
  ProjectList,
  // delProject,
} from "@/api/model/login";
import { onMounted, reactive, ref, watch } from "vue";
const obj = reactive({
  page: 1,
  total: 0,
});
const formLabelWidth1 = ref(100);
const options = reactive([
  {
    label: "酒店",
    value: "酒店",
  },
  {
    label: "办公",
    value: "办公",
  },
  {
    label: "购物中心",
    value: "购物中心",
  },
  {
    label: "综合体",
    value: "综合体",
  },
  {
    label: "学校",
    value: "学校",
  },
  {
    label: "医院",
    value: "医院",
  },
  {
    label: "其他1",
    value: "其他1",
  },
  {
    label: "其他2",
    value: "其他2",
  },
  {
    label: "其他3",
    value: "其他3",
  },
]);
// const value1 = ref('')
const cpwd = ref(false);

const add = ref(false);
const edit = ref(false);

watch(
  () => obj.page,
  () => {
    getprojectData();
  }
);
// const dialogFormVisible = ref(false);
// const value = ref('')
const xinxi = reactive({
  options: regionData,
  selectedOptions: [],
  user: {},
  form: {},
  tableData: [],
  addproject: {
    city: "",
  },
  editproject: {},
});

const addform = reactive({
  projectName: "",
  city: "",
  fun: "",
  owner: "",
  allCount: "",
  onlineTime: "",
});
const fileList = ref([]);
onMounted(() => {
  getprojectData(obj.page);
});
// 查看城市
// checkCity=()=>{
// 	let
// };
// 判断城市
const getcity = (i) => {
  let item = i.split("/");
  let citys = [
    TextToCode[item[0]].code,
    TextToCode[item[0]][item[1]].code,
    TextToCode[item[0]][item[1]][item[2]].code,
  ];
  return citys;
};
//修改数据功能
const handleupdate = (q, w) => {
  console.log("修改框数据", q);
  console.log("修改框数据", w);
  console.log(w);
  xinxi.editproject = JSON.parse(JSON.stringify(w));
  edit.value = true;
  xinxi.editproject.city = getcity(w.city);
};
// 删除项目
// const handleDelete = async (w) => {
  // const res = await delProject({ ids: w.projectId });
  //   if(res)
  // getprojectData(obj.page);
// };
//修改弹框，点击取消功能
const cancelSave = () => {
  edit.value = false;
  cpwd.value = false;
  xinxi.editproject = {};
};
//添加对话框里的选择省市区功能
const qweqwe = (e) => {
  xinxi.addproject.city = `${CodeToText[e[0]]}/${CodeToText[e[1]]}/${
    CodeToText[e[2]]
  }`;
};
const putcity = (e) => {
  xinxi.editproject.city = `${CodeToText[e[0]]}/${CodeToText[e[1]]}/${
    CodeToText[e[2]]
  }`;
};
function imgupload(e) {
  xinxi.addproject.img = e.date.url;
  fileList.value.push({
    name: e.date.name,
    url: e.date.url,
  });
}
const handleRemove = () => {
  fileList.value = [];
};
const cg = (f, files) => {
  if (files) {
    fileList.value = files.slice(-1);
  }
}; //添加对话框中保存功能
const addproject = async () => {
  console.log("添加对话框中保存数据", xinxi.addproject);
  xinxi.addproject.onlineTime = xinxi.addproject.onlineTime.replace(/\//g, "-");
  let res = await addProject(xinxi.addproject);
  console.log(res, "添加");
  if (res.status == 200) {
    add.value = false;
  }
  getprojectData();
};

const getprojectData = async () => {
  let res = await ProjectList({ page: obj.page });
  // console.log(res.data.data,'项目管理数据');
  xinxi.tableData = res.data.data.list;
  obj.total = res.data.data.total;
  console.log(xinxi.tableData);
  // getprojectData()
};
//保存修改功能
const editproject = async () => {
  console.log("保存修改功能", xinxi.editproject);
  let res = await ProjectUpdate(xinxi.editproject);
  console.log("ProjectUpdate", res);
  if (res.status == 200) {
    edit.value = false;
  }
  getprojectData();
};
</script>

<style scoped lang="less">
.pwd {
  height: 50%;
}
.smbtn {
  width: 80px;
  height: 30px;
}

.userDialog {
  :deep(.el-dialog__title) {
    color: rgb(81, 99, 167);
    font-size: 19px;
  }

  :deep(.el-dialog__close) {
    font-size: 27px !important;
    color: rgb(81, 99, 167);
  }

  :deep(.el-dialog__body) {
    padding: 20px 0 20px;
  }
}

.left {
  background-color: white;

  border-style: none;
  border-color: unset;
  box-shadow: rgb(77 98 165 / 10%) 0px 5px 20px 0px;
  border-radius: 8px;
  font-size: 14px;
  line-height: 20px;
  font-weight: normal;
  font-style: normal;

  .title {
    padding: 20px;

    .word {
      font-family: SourceHanSansSC;
      font-weight: 550;
      font-size: 20px;
      color: rgb(77, 98, 165);
      font-style: normal;
      letter-spacing: 2px;
      line-height: 28px;
      text-decoration: none;
    }
  }

  .line {
    border-bottom: 2px rgba(77, 98, 165, 0.2) solid;
  }

  .middle {
    padding: 20px;
    width: 100%;
    font-family: SourceHanSansSC;
    font-weight: 400;
    font-size: 16px;
    color: rgb(127, 127, 127);
    font-style: normal;
    letter-spacing: 0px;
    line-height: 22px;
    text-decoration: none;
    height: 730px;
    .mtop {
      display: flex;
      justify-content: space-between;

      .el-button {
        width: 104px;
        height: 30px;
        z-index: 698;
        background-color: rgb(147, 170, 222);
        color: white;
      }
    }

    .line2 {
      width: 100%;
      padding-left: 40px;
      padding-right: 40px;
      border-bottom: dashed rgb(220, 224, 238) 1px;
      height: 1px;
      margin: auto;
      margin: 30px 0px 30px 0px;
    }
  }

  .bottom {
    .Btop {
      display: flex;
      justify-content: space-between;
      padding: 10px 0px 10px 0px;

      .el-button {
        width: 104px;
        height: 30px;
        z-index: 698;
        background-color: rgb(147, 170, 222);
        color: white;
      }
    }

    .table {
      .el-button {
        width: 80px;
        height: 30px;
        background-color: rgb(143, 170, 220);
        border-style: none;
        border-color: unset;
        border-radius: 4px;
        font-size: 14px;
        padding: 0px;
        text-align: center;
        line-height: 20px;
        font-weight: normal;
        font-style: normal;
      }
    }

    .page {
      display: flex;
      justify-content: flex-end;
    }
  }
}

.dialog {
  .el-form {
    width: 246px;
    border-style: none;
    border-color: unset;
    border-radius: 8px;
    font-size: 14px;
    text-align: center;
    line-height: 20px;
    font-weight: normal;
    font-style: normal;
    padding-top: 20px;
    margin-left: 20px;
  }

  /deep/.el-input__inner {
    -webkit-appearance: none;
    appearance: none;
    background-color: var(--el-input-bg-color, var(--el-color-white));
    background-image: none;
    border-radius: var(--el-input-border-radius, var(--el-border-radius-base));
    border: var(--el-input-border, var(--el-border-base));
    box-sizing: border-box;
    color: var(--el-input-text-color, var(--el-text-color-regular));
    display: inline-block;
    font-size: inherit;
    height: 30px;
    line-height: 32px;
    outline: 0;
    padding: 0 11px;
    transition: var(--el-transition-border);
    width: 200px;
  }

  .userimg {
    .mask {
      // margin-top: 20px;
      position: absolute;
      top: 20px;
      background-color: rgba(0, 0, 0, 0.3);
    }

    img {
      width: 55px;
      height: 55px;
      border-radius: 100%;
    }

    // padding-top: 30px;
    margin: auto;
    width: 55px;
    height: 55px;
    border-radius: 100%;

    background-color: thistle;
    position: relative;
    // top: 20px;

    /* 而是显示元素 */
  }

  .userimg1 {
    background-color: rgba(27, 109, 204, 0.7);

    .qwe {
      margin-left: 15px;
    }

    .mask {
      font-size: 12px;
      width: 55px;
      height: 55px;
      border-radius: 100%;
      // background-color: rgba(27, 109, 204, 0.7);
      // margin-top: 20px;
      position: absolute;
      top: 20px;
      margin-bottom: 10px;

      img {
        width: 45px;
        height: 45px;
        position: absolute;
        top: -18px;
        left: 6px;
      }
    }

    img {
      width: 55px;
      height: 55px;
      border-radius: 100%;
    }

    // padding-top: 30px;
    margin: 0 auto;
    width: 55px;
    height: 55px;
    border-radius: 100%;

    background-color: thistle;
    position: relative;
    // top: 20px;

    /* 而是显示元素 */
  }

  /deep/ .el-form-item__label {
    font-family: SourceHanSansSC;
    font-weight: 400;
    font-size: 14px;
    color: rgb(127, 127, 127);
    font-style: normal;
    letter-spacing: 0px;
    line-height: 20px;
    text-decoration: none;
    padding-right: 30px;
  }
}

.dialogs {
  /deep/.el-dialog {
    --el-dialog-width: 410px;
    --el-dialog-margin-top: 15vh;
    --el-dialog-bg-color: var(--el-color-white);
    --el-dialog-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    --el-dialog-title-font-size: var(--el-font-size-large);
    --el-dialog-content-font-size: 14px;
    --el-dialog-font-line-height: var(--el-font-line-height-primary);
    --el-dialog-padding-primary: 20px;
    position: relative;
    margin: var(--el-dialog-margin-top, 15vh) auto 50px;
    background: var(--el-dialog-bg-color);
    border-radius: 8px;
    box-shadow: var(--el-dialog-box-shadow);
    box-sizing: border-box;
    width: var(--el-dialog-width, 410px);
  }

  /deep/.line4 {
    border-bottom: 2px rgba(77, 98, 165, 0.2) solid;
  }

  /deep/.el-input {
    width: 200px;
  }

  .el-form {
    width: 246px;
    border-style: none;
    border-color: unset;
    border-radius: 8px;
    font-size: 14px;
    text-align: center;
    line-height: 20px;
    font-weight: normal;
    font-style: normal;
    padding-top: 20px;
    margin-left: 40px;
  }

  /deep/.el-input__inner {
    left: 870px;
    top: 428px;
    height: 30px;
    border-radius: 4px;
    color: rgba(204, 204, 204, 100);
    font-size: 14px;
    text-align: left;
    font-family: Microsoft Yahei;
    border: 1px solid rgba(204, 204, 204, 100);
    line-height: 32px;
    outline: 0;
    padding: 0 11px;
    transition: var(--el-transition-border);
    width: 250px;
  }

  .userimg {
    padding-top: 30px;
    margin: auto;
    width: 55px;
    height: 55px;
    border-radius: 100%;
    background-color: thistle;
  }

  /deep/ .el-form-item__label {
    left: 790px;
    top: 433px;
    width: 57px;
    height: 20px;
    color: rgba(127, 127, 127, 100);
    font-size: 14px;
    text-align: left;
    font-family: SourceHanSansSC-regular;
  }
}

.chpwd {
  margin-left: 50px;
  left: 1037px;
  top: 633px;
  width: 56px;
  height: 20px;
  color: rgba(77, 98, 165, 100);
  font-size: 14px;
  text-align: left;
  font-family: SourceHanSansSC-regular;
  /deep/ span {
    color: #4d62a5 !important;
    display: inline-flex;
    align-items: center;
  }
}

.line3 {
  border-bottom: 2px rgba(77, 98, 165, 0.2) solid;
  margin-bottom: 30px;
}

.cancel {
  left: 917px;
  top: 696px;
  width: 80px;
  height: 30px;
  line-height: 20px;
  border-radius: 4px;
  background-color: rgba(204, 204, 204, 100);
  text-align: center;
  border: none;
}

.save {
  left: 1013px;
  top: 696px;
  width: 80px;
  height: 30px;
  line-height: 20px;
  border-radius: 4px;
  background-color: rgba(143, 170, 220, 100);
  text-align: center;
  border: none;
}
</style>
<style scoped lang="less">
/deep/.el-dialog {
  --el-dialog-width: 346px;
  --el-dialog-margin-top: 15vh;
  --el-dialog-bg-color: var(--el-color-white);
  --el-dialog-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  --el-dialog-title-font-size: var(--el-font-size-large);
  --el-dialog-content-font-size: 14px;
  --el-dialog-font-line-height: var(--el-font-line-height-primary);
  --el-dialog-padding-primary: 20px;
  position: relative;
  margin: var(--el-dialog-margin-top, 15vh) auto 50px;
  background: var(--el-dialog-bg-color);
  border-radius: var(--el-border-radius-small);
  box-shadow: var(--el-dialog-box-shadow);
  box-sizing: border-box;
  width: var(--el-dialog-width, 346px);
}

/deep/.el-table tr {
  background-color: rgb(246, 250, 255);
}

.el-row {
  margin-bottom: 20px;
}

.el-row:last-child {
  margin-bottom: 0;
}

.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

/deep/.el-table td.el-table__cell,
.el-table th.el-table__cell.is-leaf {
  border-bottom: white 4px solid !important;
}

.example-pagination-block + .example-pagination-block {
  margin-top: 10px;
}

.example-pagination-block .example-demonstration {
  margin-bottom: 16px;
}

/deep/.el-button > span {
  color: white;
  display: inline-flex;
  align-items: center;
}
</style>
